<template>
	<view class="modifyphone">
		<!-- 顶部导航 -->
		<diyNavBar value='修改头像昵称'></diyNavBar>
		<view class="modify-item">
			<view class="left">头像</view>
			<image :src="$util.img(setData.avatar)" mode="" @click="addimg"></image>
		</view>
		<view class="modify-item">
			<view class="left">昵称</view>
			<input type="text" v-model="setData.nickname" placeholder="请输入新的昵称"/>
		</view>
		<button type="default" class="determine" @click="btn">绑定</button>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import loadingCover from '../../component/loading-cover/loading-cover.vue'
	import http from '@/common/http.js'
	export default{
		components:{diyNavBar,loadingCover},
		mixins:[http],
		data(){
			return {
				setData:{
					nickname:'',
					avatar:'',
				},
				judgenum:false,//防止重复提交
			}
		},
		onLoad(){
		},
		onShow(){
			this.$http.sendrequest('/member/Personalsz',{},{
				tokenJudge:true
			}).then(res=>{
				if(res.code == 1) {
					this.setData.nickname = res.data.nickname;
					this.setData.avatar = res.data.avatar;
					this.$refs.loadingCover.hide();
				}
			})
		},
		methods:{
			// 数据修改
			btn(){
				if(this.judgenum) return false;
				this.judgenum = true
				this.$http.sendrequest('/member/memberUpdate',this.setData,{
					tokenJudge:true
				}).then(res=>{
					uni.showToast({title:res.msg,icon:'none'});
					this.judgenum = false
					if(res.code == 1){
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
					}
				})
			},
			addimg(){
				this.$util.selectImage({
					num:1,
					success:res=>{
						if(res.judge){
							let url = JSON.parse(res.data).data[0].filepath;
							url = url.split('/uploads')[1]
							this.setData.avatar = url;
						}

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modifyphone{
		min-height: 100vh;
		background: $uni-content-background-color;
		.modify-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			width: 100%;
			height: 120rpx;
			background: #FFFFFF;
			font-size: 28rpx;
			border-bottom: 2rpx solid rgba(0,0,0,.02);
			.left{
				width:140rpx;
				margin-right: 40rpx;
			}
			image{
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
			.text{
				font-size: 28rpx;
				color: #666666 ;
			}
			input{
				width: calc(60% - 120rpx);
				height: 80%;
				text-align: right;
				font-size: 28rpx;
				
			}
		}
		.determine{
			width: auto;
			background: $uni-tabbar-hovercolor;
			color: #FFFFFF;
			font-weight: bold;
			border-radius: 120rpx;
			margin: 60rpx 30rpx;
		}
	}

</style>
